<!-- 行内样式 学习测试时使用 -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>行内样式</title>
</head>
<body>
  <button style="background-color: red; font-size: 24px;">行内样式</button>
</body>
</html> -->

<!-- 内部样式 书写少量css代码，学习测试时使用
    书写位置：title 标签下方添加 style 【双标签】，style标签里面写CSS代码
    CSS写法：选择器 {属性名: 属性值;}
 -->
 <!-- <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>内部样式表</title>
   <style>
     button {
       background-color: red; 
       font-size: 24px;
     }
   </style>
   
 </head>
 <body>
   <button>测试内部样式表</button>
 </body>
 </html> -->

 <!-- 外部样式 书写大量css代码，开发时使用 -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>外部样式表</title>
   <!-- 加载外部样式表 -->
   <link rel="stylesheet" href="./styles/test.css">
 </head>
 <body>
   <button>测试外部样式表</button>
 </body>
 </html>